<template>
  <div>
    <wanglei-tabs v-model="activeName">
      <wanglei-tab-pane label="选项一" name="tabOne">我是tabOne下的内容</wanglei-tab-pane>
      <wanglei-tab-pane name="tabTwo">
        <template #label="slotProps"><b>哈哈{{ slotProps }}</b></template>
        我是tabTwo下的内容
      </wanglei-tab-pane>
      <wanglei-tab-pane label="选项三" name="tabThree">我是tabThree下的内容</wanglei-tab-pane>
    </wanglei-tabs>
  </div>
  <br><br>
  card <br>
  <div>
    <wanglei-tabs v-model="activeName" type="card">
      <wanglei-tab-pane label="选项一" name="tabOne">我是tabOne下的内容</wanglei-tab-pane>
      <wanglei-tab-pane name="tabTwo">
        <template #label="slotProps"><b>哈哈{{ slotProps }}</b></template>
        我是tabTwo下的内容
      </wanglei-tab-pane>
      <wanglei-tab-pane label="选项三" name="tabThree">我是tabThree下的内容</wanglei-tab-pane>
    </wanglei-tabs>
  </div>

  <br><br>
  cap <br>
  <div>
    <wanglei-tabs v-model="activeName" type="cap">
      <wanglei-tab-pane label="选项一" name="tabOne">我是tabOne下的内容</wanglei-tab-pane>
      <wanglei-tab-pane name="tabTwo">
        <template #label="slotProps"><b>哈哈{{ slotProps }}</b></template>
        我是tabTwo下的内容
      </wanglei-tab-pane>
      <wanglei-tab-pane label="选项三" name="tabThree">我是tabThree下的内容</wanglei-tab-pane>
    </wanglei-tabs>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const activeName = ref('')
    return {
      activeName
    }
  }
})
</script>

<style scoped>

</style>
